<!-- 手机号 -->
<template>
  <view class="uni-content">

    <div>
      <!-- 顶部文字 -->
      <text v-if="hasPhone" class="title title-box">修改手机号</text>
      <text v-if="!hasPhone" class="title title-box">绑定手机号</text>
    </div>

    <uni-forms ref="form" :value="formData" err-show-type="toast">
      <uni-forms-item v-if="hasPhone" name="oldPhone">
        <uni-easyinput :focus="focusOldPhone" @blur="focusOldPhone = false" class="input-box"
                       type="Phone" :inputBorder="false" v-model="formData.oldPhone" disabled placeholder="请输入旧手机号">
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="newPhone">
          <uni-easyinput :focus="focusNewPhone" @blur="focusNewPhone = false" class="input-box"
                         type="Phone" :inputBorder="false" v-model="formData.newPhone" placeholder="请输入新手机号">
          </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="sms_code">
        <view class="flex justify-between items-center">
            <uni-easyinput :focus="focussms_code" @blur="focussms_code = false" class="input-box"
                           type="Phone" :inputBorder="false" v-model="formData.sms_code" placeholder="输入短信验证码">
            </uni-easyinput>
            <button :disabled="sendSmsStatus" class="send-btn uni-btn-small" type="" @click="sendSms">{{ sendSmsText }}</button>
        </view>
      </uni-forms-item>

      <button class="uni-btn send-btn-box" type="primary" @click="submit">提交</button>
    </uni-forms>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      hasPhone:false,
      phone: '',
      sendSmsText: '发送验证码',
      sendSmsStatus: false,

      focusOldPhone: false,
      focusNewPhone: false,
      focussms_code: false,
      formData: {
        'oldPhone': '',
        'newPhone': '',
        'sms_code': '',
      },
      rules: {
      },
      logo: "/static/logo.png"
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  onShow() {
    // #ifdef H5
    document.onkeydown = event => {
      var e = event || window.event;
      if (e && e.keyCode == 13) { //回车键的键值为13
        this.submit()
      }
    };
    // #endif
  },
  onLoad(t) {
    if (t.phone!='' && t.phone!=null) {
      this.phone = t.phone
      this.formData.oldPhone = t.phone
      this.hasPhone = true
    }
  },
  methods: {

    //发送短信
    sendSms() {
      //60s后允许重发,这里修改sendSmsStatus为true表示正在发送, sendSmsText提示信息修改
      if (this.sendSmsStatus) {
        return
      }
      if (this.phone == '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      app.globalData.util.request({
        url: 'entry/wxapp/sms_code',
        no_token: true,
        cachetime: '0',
        data: {
          user_tel:this.formData.newPhone
        },
        success: (res)=> {

          uni.showToast({
            title: res.data.msg
          });
          this.formData.sms_code = res.data.data.sms_code

          if (res.data.code == 0) {
            this.sendSmsStatus = true
            this.sendSmsText = '30秒后可重发..'
            setTimeout(() => {
              this.sendSmsStatus = false
              this.sendSmsText = '发送验证码'
            }, 30*1000);
          }
        }
      });
    },
    /**
     * 完成并提交
     */
    submit() {
      this.$refs.form.validate()
          .then(res => {
            let {
              oldPhone,
              newPhone,
              sms_code
            } = this.formData

            app.globalData.util.request({
              url: 'entry/wxapp/update_user_tel',
              cachetime: '0',
              data: {
                old_phone: oldPhone,
                new_phone: newPhone,
                sms_code: sms_code,
              },
              success: (res)=> {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                })
                if(res.data.code==0){
                  return
                }
                setTimeout(()=>{
                  uni.navigateBack({
                    delta: 1
                  })
                },500)
              }
            })

          }).catch(errors => {
        let key = errors[0].key
        key = key.replace(key[0], key[0].toUpperCase())
        this['focus' + key] = true
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/uni_modules/uni-id-pages/common/login-page.scss";

@media screen and (max-width: 690px) {
  .uni-content{
    margin-top: 15px;
  }
}

@media screen and (min-width: 690px) {
  .uni-content{
    padding: 30px 40px 40px;
  }
}
</style>
